<!--
 * @Author: 陈焕杰
 * @Date: 2020-06-29 16:02:56
 * @LastEditTime: 2020-07-06 10:08:39
 * @LastEditors: Please set LastEditors
 * @Description: 订单状态
 * @FilePath: \mobile_project\src\pages\user\orders\components\orderState.vue
--> 

<template>
  <div class="order-state">
      <div class="left">
        <p class="left-state">订单状态</p>
        <p class="now-state">{{status === "cancelled" ? "订单已取消" : status === "un_shipped" ? "待发货" : status === "un_paid" ? "待付款" : "" }}</p>
      </div>
      <template v-if="status === 'un_paid'">
        <van-button color="#fff" :to="{path:'/orderpay',query:{id:this.$route.query.id}}">去付款</van-button>
      </template>
    </div>
</template>

<script>
export default {
  props:{
    status:{
      type:String,
      required:true,
      default:""
    }
  }
}
</script>

<style lang="scss" scoped>
.order-state {
    height: 100px;
    background-image: linear-gradient(to right, #ff4747, #ff8e8e);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px 0 25px;
    .left {
      .left-state {
        color: #ffd2d2;
        font-size: 12px;
      }
      .now-state {
        color: #fff;
        font-weight: bold;
        font-size: 16px;
      }
    }
    .van-button {
      height: 30px;
      border-radius: 5px;
      box-shadow: 0px 2px 3px #000;
      span {
        color: #ff7882;
      }
    }
  }
</style>